<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>Layout Container</title>

        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/style.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/Layout/css/layout-default-latest.css')}}"/>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/jquery-ui-1.8.21.custom.css')}}" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/bootstrap/css/bootstrap.min.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('widget/wrap-bootstrap.css')}}"/>

        <SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/jquery-ui-1.8.19/js/jquery-ui.js')}}"></SCRIPT>
        <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/Layout/js/jquery.layout-latest.js')}}"></SCRIPT>
        <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/bootstrap.js')}}"></script>
        <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/application.js')}}"></script>

        <!-- main layout Style -->
        <link rel="stylesheet" type="text/css" href="{{asset('mainlayout/css/layout.css')}}"/>

        {#Plugin jquery du monitor#}
        <script src="{{asset('js/monitor-plugin.js')}}"></script>
        <script src="{{asset('widget/widget-plugin.js')}}"></script>

        <script type="text/javascript">

                var nb_widget_total;
                $(function() {
                        /*****************************
		*     WIDGET MANAGEMENT      *
		******************************/
		//WIDGET: ONTOP sur click
		
		$(".widget").on("mousedown", function() {
                        nb_widget_total = $(".widget").size();
			var what_zindex = parseInt($(this).css("z-index"));
			var widget_to_modify = $(this);
			$(".widget").each(function () {
				if ( parseInt($(this).css("z-index")) > what_zindex) {
				  $(this).css("z-index","-=1");
				}
			});
			widget_to_modify.css("z-index",nb_widget_total);
			/*alert(what_zindex);*/
		});
		//WIDGET: DRAGGABLE
		$( ".widget" ).draggable({cursor: "move",handle: ".widget-header" ,snap: ".widget", snapMode: "outer", snapTolerance: "10"});
		//$( ".title_to_drag" ).draggable({helper: "clone",cursor: "move"});
		$( ".widget-header i.icon-move" ).draggable({helper: function( event ) {
				return $( "<div class='ui-widget-header widget-header' style='z-index:100'>I'm a custom helper</div>" );
			}
		,cursor: "move"});
		
		//WIDGET: REZISABLE
                
                $(".widget").resizable({
                        maxHeight: 700,
                        maxWidth: 700,
                        minHeight: 100,
                        minWidth: 200
                });
            });
          </script>

        {#Script de test#}
          <script type="text/javascript" src="{{asset('loading/lightbox-fade.js')}}"></script>
          <link rel="stylesheet" href="{{asset('loading/lightbox-image.css')}}" type="text/css" media="all" />
          
          <script type="text/javascript">
            $(document).ready(function(){
                //désactive le click sur la fenetre de chargement
                $("#loading").unbind("click");
                //fin de chargement du login
                //$("#check-login-load").append("<img src='/GWIT_Plateform_Trading/web/loading/image/valide2.png'/>");
                //$(".widget_zone").widget_add();
            });
          </script>

                <!-- Initialisation du GUI -->
            <script type="text/javascript" src="{{asset('js/Init_layout.js')}}"></script>
            </head>
            <body>
{#Div de test de la fenetre de chargement#}
                    <div id="loading">
                        <div id="shadowing-loader"></div>
                        <div id="box-loader" class="modal hide">
                            <div id="boxcontent-loader" onclick="closebox()">
                                <div style="float:left; width: 40%;">
                                    <img style="margin-top:45%;margin-left:20%;" src='{{asset('loading/image/loading5.gif')}}'/>
                                </div>
                                <div style="float:left;margin-top:10%;">
                                    <table>
                                        <tr style="height:70px;">
                                            <td id="check-login-load" style="width:30px;"></td><td>LOGIN</td>
                                        </tr>
                                        <tr style="height:70px;">
                                            <td id="check-appli-load" style="width:30px;"></td><td>CHARGEMENT APPLICATION</td>
                                        </tr>
                                        <tr style="height:70px;">
                                            <td id="check-perso-load" style="width:30px;"></td><td>CHARGEMENT DE DONNEE PERSONNEL</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <div id="boxtitle">Chargement en cour</div>
                        </div>
                    </div>

                {#LightBox de creation d'un nouveau moniteur#}
                    <div id="lightbox-newmonitor">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Create monitor</h3>
                            </div>
                            <div class="modal-body" id="boxcontent">
                                <label>Name :</label><input id="new-monitor-name" onclick="$(this).val('')" type="text" value="New Desktop" MAXLENGTH="15"/>
                                <label>Commentaire :</label><textarea id="new-monitor-cmt" rows="2" cols="20" ></textarea>
                            </div>
                            <div class="modal-footer" id="btn-create-desktop">
                                <a href="#" class="btn btn-primary">Create</a>
                            </div>
                        </div>
                    </div>
                    
                {#LightBox update d'un moniteur TODO: Faire marcher le bouton quitter#}
                    <div id="lightbox-update-monitor">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide">
                            <div class="modal-header">
                                <button href="#" onclick="javascript:$('#lightbox-update-monitor div#shadowing').hide();
                                                                 $('#lightbox-update-monitor div#box').hide();" class="close">&times;</button>
                                        <h3>Update monitor</h3>
                                </div>
                                <div class="modal-body" id="boxcontent">
                                    <label>Name :</label><input id="update-monitor-name" onclick="$(this).val('')" type="text" value="New name" MAXLENGTH="15"/>
                                    <label>Commentaire :</label><textarea id="update-monitor-cmt" rows="2" cols="20"></textarea>
                                </div>
                                <div class="modal-footer" id="btn-update-desktop">
                                    <a href="#" class="btn btn-primary">Save changes</a>
                                </div>
                            </div>
                        </div>
                    
                    {#LightBox ajouter widget TODO: Faire marcher le bouton quitter#}
                    <div id="lightbox-add-widget">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide">
                            <div class="modal-header">
                                <button href="#" onclick="javascript:$('#lightbox-add-widget div#shadowing').hide();
                                                                 $('#lightbox-add-widget div#box').hide();" class="close">&times;</button>
                                <h3>Create widget</h3>
                                
                            </div>
                            <div class="modal-body" id="boxcontent">
                                <label>Name :</label><input id="add-widget-name" onclick="$(this).val('')" type="text" value="New Widget" MAXLENGTH="15"/>
                            </div>
                                <div class="modal-footer" id="btn-add-widget">
                                    <a href="#" class="btn btn-primary">create</a>
                                </div>
                            </div>
                     </div>

                        {#modalBox : confirmation de destruction#}
                        <div id="modal-from-dom" class="modal hide fade">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Delete URL</h3>
                            </div>
                            <div class="modal-body">
                                <p>Vous êtes sur le point d'effacer un bureau, cette procédure est irréversible.</p>
                                <p>Voulez vous continuer ?</p>
                            </div>
                            <div class="modal-footer">
                                <a id="delete-desktop" href="#" class="btn danger">Yes</a>
                                <a href="#" onclick="javascript:$('#modal-from-dom').modal('hide')" class="btn secondary">No</a>
                            </div>
                        </div>
                    
                    {#modalBox : confirmation de destruction#}
                        <div id="modal-from-widget" class="modal hide fade">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Delete widget</h3>
                            </div>
                            <div class="modal-body">
                                <p>Vous êtes sur le point d'effacer un widget, cette procédure est irréversible.</p>
                                <p>Voulez vous continuer ?</p>
                            </div>
                            <div class="modal-footer">
                                <a id="delete-widget" href="#" class="btn danger">Yes</a>
                                <a href="#" onclick="javascript:$('#modal-from-dom').modal('hide')" class="btn secondary">No</a>
                            </div>
                        </div>
                   

                        <!-- HEADER APPLICATION -->
                        <div id="header" class="pane ui-layout-north" style="overflow:none; height: 50px;" >
                            <div id="logo">
                            </div>

                            <div id="main_menu" style="width: 80%;">
                            {# Check box choix du moniteur #}	
                                    <div class="dropdown_button" style="position:relative;float:left">
                                        <button class="btn dropdown" href="#"><i class="icon-eye-open icon-black"></i> Monitors &nbsp &nbsp<span class="caret"></span></button>

                                        <ul id="monitor_menu" class="dropdown-menu" style="font-size: 13px;text-shadow: none;width:250px;">
                                            <div id="desktop-grpe">
                                                <li class="li_grey monitor_page" m-id="999">
                                                    <a href="#monitor_1" class="button-desktop-activate" style="float:left;">
                                                        <div style="width:176px;position:relative;float:left">
                                                            <i class="icon-ok icon-white"></i> 
                                                            <span style="width:500px;"> Test Code C++</span>
                                                        </div>
                                                        <div style="margin-top:-3px;float:right;position:relative">
                                                            <div class="btn" style="margin:3px 1px -1px 1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
                                                            <div class="btn" style="margin:3px 1px -1px 1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </div>
                                            <li class="divider"></li>
                                            <li class="new-monitor"><a href="#"><i class="icon-plus"></i> New</a></li>
                                            <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                        </ul>
                                    </div>

                                    {# Check box choix du widget #}
                                    <div style="position:relative;float:left; margin-left:20px;">
                                        <button class="btn dropdown widget_button" href="#"><i class="icon-th-large icon-black"></i> Widgets &nbsp &nbsp<span class="caret"></span></button>
                                        <ul id="widget_menu" class="dropdown-menu" style="font-size: 13px;text-shadow: none;width:250px;">
                                            <div id="widget-grpe">
                                                <li class="li_grey wiget_list" m-id="999">
                                                    <a href="#widget_1">
                                                        <i class="icon-ok"></i>
                                                        <span> Test Download</span>
                                                        <div style="float:right;display: block;margin-top:-3px;">
                                                            <div class="btn" style="margin:1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
                                                            <div class="btn" style="margin:1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
                                                        </div>
                                                    </a> 
                                                </li>
                                            </div>
                                            <li class="divider"></li>
                                            <li class="under_menu"><a href="#"><i class="icon-plus"></i> Add widget</a></li>
                                        </ul>
                                    </div>

                                    {# Bouton de navigation des moniteur #}                            
                                    <div style="position:relative;float:left; margin-left:15%; width: auto;">
                                        <ul class="pager">
                                            <li class="previous" id="previous-desktop" style="float:left;margin-left:10px;">
                                                <a href="#">&larr;</a>
                                            </li>
                                            <li id="label-desktop-name" style="float:left;margin-left:20px;margin-top:5px;min-width: 100px;">
                                                <label></label>
                                            </li>
                                            <li class="next" id="next-desktop" style="float:left;margin-left:10px;">
                                                <a href="#">&rarr;</a>
                                            </li>
                                        </ul>
                                    </div>

                                    {# Bouton d'ouverture du menu deroulant utilisateur #}
                                    <div style="position:relative;float:right;margin-left:20px; width: auto;">
                                        <ul class="nav pull-right">
                                            <li data-setup="menu" class="menu dropdown">
                                                <a id="profile" class="btn dropdown-toggle" style="cursor:pointer;" data-toggle="dropdown">
                                                    <i class="icon-user"></i>
                                                    <span style="height: 30px;">
                                                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                                                    {{ app.user.username }}
                                                {% else %}
                                                            <a href="{{ path('fos_user_security_login') }}">Connexion</a>
                                                {% endif %}</span>&nbsp;
                                                        <span class="caret"></span>
                                                    </a>
                                                    <ul id="profile-list" style="display: none;" class="dropdown-menu">
                                                        <li>
                                                            <a data-click="save" data-setup="click">Save State</a>
                                                        </li>
                                                        <li>
                                                            <a data-click="reload" data-setup="click">Reload</a>
                                                        </li>
                                                        <li>
                                                            <a data-show="{&quot;id&quot;:&quot;settings-window&quot;}" data-setup="show">Settings</a>
                                                        </li>
                                                        <li>
                                                            <a target="_blank" href="https://www.facebook.com/pages/7kai-Tasks/189391624444427">Support</a>
                                                        </li>
                                                        <li>
                                                            <a target="_blank" href="/staff">Staff Room</a>
                                                        </li>
                                                        <li class="divider"></li>
                                                        <li><a href='{{path('fos_user_security_login')}}'>Sign Out</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div id="center" class="pane-main ui-layout-center">
                                    <div class="container_page" id="monitor_1" m-id="999">
                                        <!-- WIDGET ZONE -->
                                        <div class="pane ui-layout-center" style="padding:2px;">
                                            <div class="widget_zone" style="width:100%;height:100%;">
                                                <!--
                                                <div id="widget1" class="widget modal box" style="position: absolute;  top:150px;left:1030px;z-index: 1; height:500px;width: 500px;margin:0;overflow:hidden">
                                                        <div class="widget-header modal-header box-header" style="border-bottom:1px solid #ddd;">
                                                                <h4 class="">
                                                                <span style="background:#fff">Charts - Bar</span>
                                                                <i class="icon-signal" style="float:left;margin:1px 5px 0px 0px;"></i>
                                                                <a class="box-btn" title="close"><i class="icon-trash"></i></a>
                                                                <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                                                                <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>

                                                                <a class="box-btn" style="margin-right:10px;" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-move"></i></a>

                                                            </h4>
                                                        </div>
                                                        <div id="widget1_body" class="modal-body">

                                                                <div id="widget1_container" style="width: 400px; height: 400px; margin: 0 auto; overflow:auto"></div>
                                                        </div>
                                                        </div>
                                                -->
                                            </div>
                                        </div><!-- WIDGET ZONE -->

                                        <div class="pane ui-layout-west" style="background-color:#F5F5F5;">
                                            <div class="menu_left">
                                                <ul class="nav nav-list">
                                                    <li class="nav-header">Add Widgets</li>
                                                    <li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
                                                    <li><a href="#"><i class="icon-book"></i> Betslip</a></li>
                                                    <li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
                                                    <li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
                                                    <li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
                                                    <li class="nav-header">Negative Middles</li>
                                                    <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                                                    <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#"><i class="icon-flag"></i> Help</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FIN TAB CONTENT -->

                                    <div class="pane ui-layout-west" style="background-color:#F5F5F5;">
                                        <div class="menu_left">
                                            <ul class="nav nav-list">
                                                <li class="nav-header">Add Widgets</li>
                                                <li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
                                                <li><a href="#"><i class="icon-book"></i> Betslip</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
                                                <li class="nav-header">Negative Middles</li>
                                                <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                                                <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#"><i class="icon-flag"></i> Help</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- FIN TAB CONTENT -->
                                <!-- FOOTER APPLICATION -->
                                <div id="footer" class="pane ui-layout-south">
                                    &nbsp
                                </div>
                                <script type="text/javascript" src="{{asset('js/window.js')}}"></script>
                            </body>
                        </html>